<style lang="scss" scoped>
    .viewer-button-group{
        z-index:100000;
        position:fixed;
        bottom:88px;
        left:50%;
        transform:translateX(-50%);
        > *{
            background-color:rgba(0, 0, 0, .5);
            border-radius:50%;
            cursor:pointer;
            height:30px;
            width:30px;
            overflow:hidden;
            -webkit-transition:background-color .15s;
            transition:background-color .15s;
            color:white;
            margin-left:2px;
            display:flex;
            justify-content:center;
            align-items:center;
            font-size:18px;
            position:absolute;
            top:0;
            &:hover{
                background-color:rgba(0, 0, 0, .8);
            }
        }
        .viewer-prev-group{
            left:-174px;
        }
        .viewer-next-group{
            right:-172px;
        }
    }
</style>
<template>
    <div>
        <!-- viewer实例图片组 -->
        <div ref="images" style="display:none">
            <!-- eslint-disable -->
            <!-- src的写法, 支持2种list图片路径 -->
            <img v-for="item in showList" :src="item.url || item">
        </div>
        <!-- 分组按钮,用于懒加载 -->
        <div class="viewer-button-group" :style="{display:viewer?'':'none'}">
            <div class="viewer-prev-group" @click="prevGroup" v-if="!isFirst">
                <i class="el-icon-d-arrow-left"></i>
            </div>
            <div class="viewer-next-group" @click="nextGroup" v-if="!isLast">
                <i class="el-icon-d-arrow-right"></i>
            </div>
        </div>
    </div>
</template>
<script>
    import 'viewerjs/dist/viewer.css'
    import Viewer from 'viewerjs'

    export default {
        name: 'ui-viewer',
        props: {
            list: {
                type: Array,
                required: true
            },
            groupLength: {
                type: Number,
                default: 20
            },
            zIndex:{
                type:[Number,String]
            },
            activeIndex:{
                type:[Number,String],
                default: 0
            },
            interval: {
              type: Number,
              default: 5000
            }
        },
        data() {
            return {
                viewer: null,
                clickBtn: null,
                showList: [],
                activeGroupIndex: 0
                // list: [],
                // groupLength: 20
            }
        },
        beforeDestroy() {
            this.viewer && this.viewer.destroy()
            this.$eventHub.$off('viewer', this.open)

            this.$emit('closed')
        },
        mounted() {

            this.open(this.list, this.groupLength)

            // 全局调用
            this.$eventHub.$on('viewer', this.open)
        },
        computed: {
            isFirst() {
                return this.activeGroupIndex <= 0
            },
            isLast() {
                return this.activeGroupIndex >= this.list.length / this.groupLength - 1
            }
        },
        methods: {
            _create() {
                // 生成阅览
                this.viewer && this.viewer.destroy()
                const dom = this.$refs['images']
                this.$nextTick(() => {
                    const viewerConfig = {
                        initialViewIndex: this.activeIndex,
                        interval: this.interval,
                        hidden: () => { //关闭的回调
                            this.$emit('viewer_hidden')
                            this.viewer.destroy()
                            this.activeGroupIndex = 0
                            this.viewer = null
                        }
                    }

                    //有传zIndex参数时才配置字段,否则蒙层无法获取css中zIndex定义的默认值
                    if (this.zIndex!=null) viewerConfig.zIndex = this.zIndex ;

                    this.viewer = new Viewer(dom, viewerConfig);
                    this.viewer.show()
                })
            },
            open(list, groupLength) {
                this.list = list
                this.showList = list.slice(0, groupLength)
                this.groupLength = groupLength
                // 准备需显示的图片列表
                this._create()
            },
            prevGroup() {
                if (!this.isFirst) {
                    this.activeGroupIndex--;
                    this.updateGroup(this.activeGroupIndex)
                }
            },
            nextGroup() {
                if (!this.isLast) {
                    this.activeGroupIndex++;
                    this.updateGroup(this.activeGroupIndex)
                }
            },
            updateGroup(index) {
                this.showList = this.list.slice(index * this.groupLength, index * this.groupLength + this.groupLength)
                if (this.isLast) {
                    // 最后一组小于每组设定个数时,要保证显示个数补全,否则viewer在查看最后一组图片点击时会报错
                    // 这里简单处理,直接重新create一次
                    this._create()
                }else{
                    this.$nextTick(() => {
                        this.viewer.update()
                    })
                }
            }
        }
    }
</script>
